<template>
	<view class="currentStatus page">
		<status-bar :title='classname'></status-bar>
		<view class="unihead" :style="{top:navHeight+'px'}">
			<view class="uni-page-head">
				<view class="uni-page-head__title" style="font-size: 16px; opacity: 1;">
					<view class="titles" :class="titleSelect == 1 ? 'action' : 'not_action'" @click="commodityTitle(1)">全部</view>
					<view class="titles" :class="titleSelect == 2 ? 'action' : 'not_action'" @click="commodityTitle(2)">热门</view>
					<!-- <view class="titles" :class="titleSelect == 3 ? 'action' : 'not_action'" @click="commodityTitle(3)">最新</view> -->
				</view>
			</view>
		</view>
		<view class="contents">
			<view class="contensList">
				<view class="textItems">
					<view class="itemsLists flex-box" v-for='(item,index) in postList' :key='index' v-if='item.file_content||item.file_img'>
						<view class="leftHeadImg">
							<image :src="item.headimg?item.headimg:staticUrl+'/images/jh_up/head.jpg'" mode="aspectFill"></image>
						</view>
						<view class="rightText">
							<navigator :url="'/otherPage/quanZ/postDetail?fileid='+item.file_id+'&ftvid='+item.ftvid"
							 hover-class="none">
								<view class="username">
									<view>{{item.uname}}</view>
									<text class="thmeBg circleName" :style="{'--color': color}">{{item.classname?item.classname:classname}}</text>
								</view>
								<view class="textCont">
									{{item.file_content}}
								</view>
								<view class="ImgCont" v-if='item.file_img' :class='{
									four:item.file_img.length == 4,
									one:item.file_img.length == 1
									}'>
									<image v-for='(pic,i) in item.file_img' :key='i' :src="imgUrl+pic" mode="aspectFill"></image>
								</view>
							</navigator>
							<view class="looks flex-box flex-between">
								<view class="leftDate">
									<text class="iconfont icon-bar_icon_shijian"></text>
									<text>{{item.addtime}}</text>
								</view>
								<view class="rightData flex-box">
									<view>
										<text class="iconfont icon-browse"></text>
										<text class="MORE" v-if='parseInt(item.watch)>999'>999</text>
										<text v-else>{{item.watch}}</text>
									</view>
									<view @click="like(index,item.file_id,item.ftvid)">
										<text v-if='item.likeFlag' class="iconfont icon-guanzhu3"></text>
										<text v-else class="iconfont icon-guanzhu1"></text>
										<text class="MORE" v-if='parseInt(item.zan)>999'>999</text>
										<text v-else>{{item.zan}}</text>
									</view>
									<view>
										<text class="iconfont icon-pinglun"></text>
										<text class="MORE" v-if='parseInt(item.pinlun)>999'>999</text>
										<text v-else>{{item.pinlun}}</text>
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<empty v-if='nothing' type='1' cat='3' msg='这里空空如也 ~ <br>点击下方按钮抢个沙发吧！'></empty>
		<showModel @cancelFunc='showModal = false' v-if='showModal' type='2'></showModel>
		<view class="postEnter thmeBg" :style="{'--color': color}" @click='toFt'>
			<image class="editorImg" :src="staticUrl+'/images/jh_up/icon-post1.png'"></image>
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				navHeight:getApp().globalData.navHeight,
				color: getApp().globalData.color,
				ShareIsShow: false,
				navigator: false,
				topNavHeight: 0,
				titleSelect: 1,
				clsfid: '',
				postList: [],
				bid: uni.getStorageSync('bid'),
				nothing: false,
				more: false,
				page: 1,
				fqvid: '',
				classname: '', // 圈子名
				curCLS: 1, // 当前所属分类：全部/热门/最新
				activeId: 0,
				showModal:false,// 是否显示模态框
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
			}
		},
		onLoad(options) {
			that = this
			that.fqvid = uni.getStorageSync('vid');
			var clsfid = options.clsfid;
			that.clsfid = clsfid;
			that.classname = options.classname;
			that.getList(that.clsfid, 1);
			uni.setNavigationBarTitle({
				title: that.classname
			})
			// #ifdef H5
			this.H5Share()
			// #endif
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid+'&pageType=99',
				imageUrl: shareData.imageUrl
			}
		},
		onShow() {
			
		},
		onPullDownRefresh() {
			this.postList = [];
			var nub = this.curCLS;
			if (nub == 1) { // 全部
				this.getList(this.clsfid, 1);
			}
			if (nub == 2) { // 热门
				this.more = false;
				this.getHot();
			}
			if (nub == 3) { // 最新
				this.more = false;
				this.getNew();
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		methods: {
			time(t) {
				return that.$common.timeFormat(t, 'Y.M.D h:m')
			},
			toFt() {
				let vid = uni.getStorageSync('vid')
				if(vid){
					uni.navigateTo({
						url: '/otherPage/quanZ/post?clsfid=' + that.clsfid
					})
				} else {
					that.showModal = true;
				}
			},
			getNew() {
				that.$http.post({
					url: '/zzjApp/classLastList',
					data: {
						bid: that.bid,
						classifyid: that.clsfid,
						v_id: that.fqvid,
					}
				}).then(res => {
					if (res.data) {
						res.data.forEach((item, index) => {
							if (item.file_img)
								item.file_img = item.file_img.split(',');
							item.likeFlag = false;
							// item.time = that.time(item.time)
							if (item.review_type == 2 && that.fqvid) { // 已赞
								item.likeFlag = true;
							}
							item.zan = parseInt(item.zan)
						})
						that.postList = that.postList.concat(res.data);
					} else {
						that.nothing = true
					}
				})
			},
			getHot() {
				that.$http.post({
					url: '/zzjApp/getPopular',
					data: {
						bid: that.bid,
						classifyid: that.clsfid,
						v_id: that.fqvid,
					}
				}).then(res => {
					if (res.data) {
						res.data.forEach((item, index) => {
							if (item.file_img)
								item.file_img = item.file_img.split(',');
							item.likeFlag = false;
							if (item.review_type == 2 && that.fqvid) { // 已赞
								item.likeFlag = true;
							}
							item.zan = parseInt(item.zan)
						})
						that.postList = that.postList.concat(res.data);
					} else {
						that.nothing = true
					}
				})
			},
			commodityTitle(nub) {
				that.titleSelect = nub;
				that.postList = [];
				that.curCLS = nub;
				that.page = 1;
				if (nub == 1) { // 全部
					that.getList(that.clsfid, 1);
				}
				if (nub == 2) { // 热门
					that.more = false;
					that.getHot();
				}
				if (nub == 3) { // 最新
					that.more = false;
					that.getNew();
				}
			},
			like(index, fileid, ftvid) {
				// 点赞操作
				uni.getStorage({
					key: 'vid',
					success: function(res) {
						that.$http.post({
							url: '/zzjApp/reply',
							data: {
								file_id: fileid,
								fqvid: that.fqvid, // 评论人ID
								by_fqvid: ftvid, // 被评论或被点赞人ID
								review_type: 2, // 发起类型1回复，2赞,
								mubiao: 1 ,// 回复的目标 1回复的是帖子 2回复的是人
							}
						}).then(res => {
							if (res.success) {
								that.postList[index].likeFlag = true
								that.postList[index].zan += 1;
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1500
								});
							}
						})
					},
					fail: function(res) {
						that.showModal = true;
					}
				})
			},
			getList(clsfid, page) {
				// 获取分类下的帖子 -- 全部
				that.$http.post({
					url: '/zzjApp/getClass',
					data: {
						bid: that.bid,
						classifyid: clsfid,
						pageindex: page,
						v_id: that.fqvid,
						pagecount: 10,
					}
				}).then(res => {
					if (res) {
						res.forEach((item, index) => {
							if (item.file_img)
								item.file_img = item.file_img.split(',');
							item.likeFlag = false;
							if (item.review_type == 2 && that.fqvid) { // 已赞
								item.likeFlag = true;
							}
							item.zan = parseInt(item.zan)
						})
						that.postList = that.postList.concat(res);
						console.log(that.postList)
						that.more = true;
						that.nothing = false
					} else {
						that.more = false
						if (that.postList.length < 1) {
							that.nothing = true
						}
					}
				})
			},
			backPage() {
				uni.reLaunch({
					url: "../index/assisted"
				})
			}
		},
		onReachBottom() {
			if (that.more) {
				that.page += 1;
				that.getList(that.clsfid, that.page);
			}
		},
	}
</script>

<style scoped="scoped" lang="scss">
	.currentStatus {
		background: white;
		height: 100vh;
		overflow: auto;
	}
	.currentStatus::-webkit-scrollbar{display: none;}
	.topNAVs {
		width: 100%;
		padding: 40upx 0;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		border-bottom: 20upx solid #F2F2F2;
	}

	
	.navsItem {
		width: 30%;
		text-align: center;
	}

	.navsItem image {
		width: 90upx;
		height: 90upx;
		margin-bottom: 20upx;
		position: relative;
		left: 50%;
		margin-left: -45upx;
	}

	.navsItemTitle {
		width: 100%;
		text-align: center;
		color: #333333;
	}

	.shareShow {
		transform: rotate(45deg);
	}

	.shareHide {
		transform: rotate(0deg);
	}

	.templateShow {
		display: block;
	}

	.templateHeid {
		display: none;
	}

	.contents {
		overflow-x: hidden;
		overflow-y: auto;
		padding-bottom: 20upx;
		position: relative;
		padding-top: 110upx;
	}

	.unihead {
		background-color: #FFFFFF;
		position: fixed;
		color: #000000;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9;
	}

	.uni-page-head__title {
		text-align: center;
		height: 60upx;
		line-height: 60upx;
		font-weight: 700;
		font-size: 16px;
	}

	.action {
		font-size: 36upx;
		color: #000000;
	}

	.not_action {
		color: #666666;
	}

	.uni-page-head__title .titles {
		margin: 0 10upx;
		display: inline-block;
	}

	.uni-page-head-bd {
		width: 100%;
		left: 0;
		right: 0;
		height: 60upx;
	}

	.backImg {
		width: 40upx;
		height: 40upx;
		position: absolute;
		left: 16upx;
		margin-top: 10upx;
	}

	.uni-page-head {
		width: 100%;
		height: 88upx;
		padding: 14upx 6upx;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FFFFFF;
	}

	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: relative;
		background-color: #FFFFFF;
		top: 0;
		z-index: 999;
	}

	.textItems,
	.username,
	.ImgCont,
	.looks {
		width: 100%;
	}

	.itemsLists {
		width: 100%;
		padding: 20upx;
		border-bottom: 1upx solid #F2F2F2;
		overflow: hidden;
	}

	.leftHeadImg image {
		width: 80upx;
		height: 80upx;
		border-radius: 100%;
	}

	.rightText {
		width: 610upx;
		float: left;
		margin-left: 20upx;
	}

	.username{
		font-weight: 700;
		font-size: 32upx;
		display: flex;
		flex-direction: row;
		  justify-content: flex-start;
		  align-items: center;
	}
	.username view{
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.username .circleName {
		float: right;
		font-size: 20upx;
		color: white;
		font-weight: normal;
		padding: 2px 12upx;
		border-radius: 40upx;
	}

	.textCont {
		margin: 20upx 0;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		max-height: 130upx;
	}

	.ImgCont {
		margin-top: 10upx;
		margin-right: -10upx;
	}

	.ImgCont image {
		display: inline-block;
		margin-right: 10upx;
		width: calc(33.33% - 10upx);
		height: calc(33.33vw - 54upx);
		box-sizing: border-box;
	}

	.four image:nth-child(2n) {
		margin-right: 25upx;
	}

	.one image {
		width: 45vw;
		height: 55vw;
	}

	.ImgCont image:last-child {
		margin-right: 0;
	}

	.looks {
		overflow: hidden;
		margin-top: 6upx;
	}

	.leftDate text {
		margin-right: 4rpx;
		color: #999;
	}
	
	.rightData view{flex: 1;color: #666666;font-size: 24upx;margin-right: 20upx;display: flex;align-items: center;}
	.iconfont{
		font-size: 34rpx;
		color: #AFAFAF;
		padding-right: 4rpx;
		position: relative;
		top: 2rpx;
	}
	.icon-guanzhu3{
		color: $uni-color-star;
	}
	.emptyPage {
		background: white;
	}
</style>
